<template>
    <view class="container">
        <view class="head">
            <view class="info-box">
                <view class="title">
                    企业名称：
                </view>
                <view class="input-box row">
                    <input v-model="enterprise" @input="onEnterprise" @click="isTips = true" class="input" type="text"
                        placeholder="请输入企业名称" />
                    <img class="more-img" src="@/static/score/more.png" alt="" />
                    <view class="tip" v-if="isTips">
                        <!-- <scroll-view class="scroll-box" scroll-y @scrolltolower="onScroll"> -->
                        <scroll-view class="scroll-box" scroll-y>
                            <view class="tip-li" v-for="(item, index) in tipList" :key="index" @click="onTip(item.name)">
                                {{ item.name }}
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <div class="danger" v-show="showdanger">该企业已被系统录入</div>
                <view class="title">
                    联系人姓名：
                </view>
                <view class="input-box">
                    <input v-model="name" class="input" type="text" placeholder="请输入联系人姓名" />
                </view>
                <view class="title">
                    手机号：
                </view>
                <view class="input-box">
                    <input type="number" maxlength="11" v-model="phone" class="input" placeholder="请输入手机号" />
                </view>
                <view class="title">
                    获客渠道：
                </view>
                <view class="input-box row">
                    <picker class="input" :value="hkqd" :range="hkqdlist" @change="onhkqdChange">
                        <view class="uni-input">{{ hkqdlist[hkqd] }}</view>
                    </picker>
                    <img class="more-img" src="@/static/score/more.png" alt="" />
                </view>
                <view class="title">
                    客户等级：
                </view>
                <view class="input-box row">
                    <picker class="input" :value="khdj" :range="khdjList" @change="onkhdjChange">
                        <view class="uni-input">{{ khdjList[khdj] }}</view>
                    </picker>
                    <img class="more-img" src="@/static/score/more.png" alt="" />
                </view>
                <view class="title">
                    性别：
                </view>
                <view class="input-box row">
                    <picker class="input" :value="sex" :range="sexList" @change="onSexChange">
                        <view class="uni-input">{{ sexList[sex] }}</view>
                    </picker>
                    <img class="more-img" src="@/static/score/more.png" alt="" />
                </view>
                <view class="title">
                    地址：
                </view>
                <view class="input-box">
                    <input type="text" v-model="address" class="input" placeholder="请输入地址" />
                </view>
                <view class="title">
                    备注：
                </view>
                <view class="input-box">
                    <textarea v-model="remarks" class="textarea-input" placeholder="请填写备注" />
                </view>
            </view>
        </view>
        <view class="btn-box row">
            <button class="short-btn white" @click="onCancel">
                取消
            </button>
            <button v-if="!isedit" class="short-btn" @click="onAddContacts">
                保存
            </button>
            <button v-if="isedit" class="short-btn" @click="onEditContacts">
                确认编辑
            </button>
        </view>
    </view>
</template>
<script setup lang="ts" >
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { newContacts, getEnterpriseName, getEchoContacts, updatecontactapi, checkcompanyisopenapi, getpotentialclientsapi } from '@/api/contact'
import user from '@/utils/user'
import noData from '@/components/no-data/no-data.vue'
import { toast, shake, confirm } from '@/utils/util'
const tipList = ref<any>([])
const isTips = ref(false)
const tipId = ref()
const name = ref('')
const enterprise = ref('')
const phone = ref('')
const address = ref('')
const sex = ref(0)
const sexList = ref(['男', '女'])
const remarks = ref('')
const cstContactId = ref('')
const pageNum = ref(1)
const pageSize = ref(50)
const isNextPage = ref(true)
const getpotentialclients = (id: any) => {
    getpotentialclientsapi(id).then((res: any) => {
        console.log(res, 'resdfersrersertsr')
        enterprise.value = res.companyName
        name.value = res.customName
        sex.value = Number(res.sex)
        hkqd.value = res.customerAcquisitionChannel
        khdj.value = res.isSignificance
        phone.value = res.phone
        address.value = res.address
        remarks.value = res.remark
    })
}
const isedit = ref(false)
onLoad(async (options) => {
    await user.waitLogin()
    console.log(options, 'options')
    if (options.isadd === 'false') {
        uni.setNavigationBarTitle({
            title: '编辑联系人'
        })
        isedit.value = true
        tipId.value = options.id
        getpotentialclients(Number(options.id))
    } else {
        isedit.value = false
        uni.setNavigationBarTitle({
            title: '新建联系人'
        })
    }
    cstContactId.value = options.id as string
    if (enterprise.value === '') {
        return
    } else {
        getEnterprise()
    }
})
const khdjList = ref(['不重要', '重要'])
const khdj = ref(0)
const hkqdlist = ref(['电联', '地推', '陌拜', '微信', '转介绍', '其他'])
const hkqd = ref(0)
// const onScroll = async () => {
//     if (!isNextPage.value) {
//         return
//     }
//     pageNum.value += 1
//     await getEnterprise()
// }
const onAddContacts = async () => {
    const reName = /^[\u4E00-\u9FA5]/
    const rePhone = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/
    if (!reName.test(name.value)) {
        toast('只能以汉字开头')
        return
    }
    if (!name.value) {
        toast('请输入名称')
        return
    }
    if (!enterprise.value) {
        toast('请选择企业名称')
        return
    }
    if (!rePhone.test(phone.value)) {
        toast('请输入正确的手机号')
        return
    }
    if (!phone.value) {
        toast('请输入手机号')
        return
    }
    if (showdanger.value) {
        uni.showModal({
            title: '提示',
            content: '该手机号码已被录入过，确定继续录入？',
            success: async (res) => {
                if (res.confirm) {
                    await onNewContacts()
                    toast('新建成功')
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        })
                    }, 500)
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        })
    } else {
        await onNewContacts()
        toast('新建成功')
        setTimeout(() => {
            uni.navigateBack({
                delta: 1
            })
        }, 500)
    }
}
// 编辑
const onEditContacts = async () => {
    const reName = /^[\u4E00-\u9FA5]/
    const rePhone = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/
    if (!reName.test(name.value)) {
        toast('只能以汉字开头')
        return
    }
    if (!name.value) {
        toast('请输入名称')
        return
    }
    if (!enterprise.value) {
        toast('请选择企业名称')
        return
    }
    if (!rePhone.test(phone.value)) {
        toast('请输入正确的手机号')
        return
    }
    if (!phone.value) {
        toast('请输入手机号')
        return
    }
    await confirm('确认修改吗？')
    await updatecontactapi({
        id: tipId.value,
        customName: name.value,
        phone: phone.value,
        sex: sex.value,
        companyName: enterprise.value,
        remark: remarks.value,
        address: address.value,
        isSignificance: khdj.value,
        customerAcquisitionChannel: hkqd.value,
        type: 1,
    }).then((res: any) => {
        console.log(res)
        if (res) {
            toast('编辑成功')
            setTimeout(() => {
                uni.navigateBack({
                    delta: 1
                })
            }, 500)
        }
    })
}
// 回显信息
const getEchoContactsInfo = async () => {
    const result = await getEchoContacts({
        cstContactId: cstContactId.value
    })
    name.value = result.customName
    enterprise.value = result.companyName
    phone.value = result.phone
    sex.value = Number(result.sex)
    remarks.value = result.remark
    tipId.value = result.companyId
    console.log(result, 'result')
}
// 新建联系人
const onNewContacts = async () => {
    const result = await newContacts({
        customName: name.value,
        phone: phone.value,
        sex: sex.value,
        companyName: enterprise.value,
        remark: remarks.value,
        address: address.value,
        companyId: tipId.value,
        isSignificance: khdj.value,
        customerAcquisitionChannel: hkqd.value,
        type: 1,
    })
    console.log(result, 'result')
}
// 性别选择
const onSexChange = (event: { detail: { value: string } }) => {
    sex.value = Number(event.detail.value)
}
const onkhdjChange = (event: { detail: { value: string } }) => {
    khdj.value = Number(event.detail.value)
}
const onhkqdChange = (event: { detail: { value: string } }) => {
    hkqd.value = Number(event.detail.value)
}
const onEnterprise = async () => {
    shake(async () => {
        if (enterprise.value === '') {
            return
        } else {
            await getEnterprise()
        }
        // pageNum.value = 1
        // isNextPage.value = true
        // tipList.value = []
        // if (enterprise.value) {
        //     isTips.value = true
        // await getEnterprise()
        // } else {
        //     isTips.value = false
        //     await getEnterprise()
        // }
        // console.log(enterprise.value, 'enterprise')
    })
}
const onTip = async (name: string) => {
    enterprise.value = name
    // tipId.value = id
    isTips.value = false
    checkcompanyisopenapi({ companyName: name }).then((res: any) => {
        console.log(res)
        if (res) {
            showdanger.value = true
        } else {
            showdanger.value = false
        }
    })
}
const showdanger = ref(false)
const getEnterprise = async () => {
    const result = await getEnterpriseName({
        name: enterprise.value,
        // pageSize: pageSize.value,
        // pageNum: pageNum.value
    })
    console.log(result, 'result')
    // if (!result.hasNextPage) {
    //     isNextPage.value = false
    // }
    // const arr = []
    // arr.push(...tipList.value)
    // arr.push(...result.list)
    // tipList.value = arr as any
    tipList.value = result
}
const onCancel = () => {
    uni.navigateBack({
        delta: 1
    })
}
</script>
<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #FAFAFC;
}

.head {
    padding: 30rpx;
}

.info-box {
    padding: 30rpx;
    background-color: #ffffff;
    border-radius: 16rpx;

    .title {
        color: #565868;
        font-size: 28rpx;
        font-weight: normal;
    }

    .input-box {
        border-bottom: 1rpx solid rgba(#9497B1, 0.1);
        margin-bottom: 29rpx;

        .input {
            font-size: 32rpx;
            color: #202536;
            border: none;
            padding-left: 2rpx;
            margin-top: 0rpx;
        }

        .more-img {
            width: 50rpx;
            height: 35rpx;
        }

        .textarea-input {
            width: 100%;
            margin-top: 24rpx;
            padding: 30rpx 24rpx;
            background: #F4F4F7;
            border-radius: 8rpx;
            font-size: 28rpx;
        }
    }
}

.btn-box {
    padding: 0 60rpx 30rpx 60rpx;
}

.scroll-box {
    max-height: 60vw;
}

.danger {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 23rpx 0;
    color: #FF7642;
    font-size: 24rpx;
}
</style>
